<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
    <style>
        .d1 {
            width: 375px;
            height: 700px;
            background-color: aqua;
        }

        a {
            color: black;
        }

        .s1 {
            font-size: 12px;
        }

        .s2 {
            font-size: 14px;
        }

        .d2 {
            background-color: white;
            width: 100%;
            height: 475px;
        }

        .d3 {
            height: 63px;
            background-color: red;
            position: relative;
            bottom: 0;
        }

        .a {
            height: 110px;
        }

        .a span {
            line-height: 110px;
        }

        .b1 {
            float: left;
        }

        .b2 {
            background-color: chartreuse;
            width: 319px;
            height: 440px;
            float: left;
            overflow-y: auto;
        }

        .b2 .an1 {
            margin-left: 160px;
        }

        .b {
            display: none;
        }

        .show {
            display: block;
        }

        .d3 p {
            display: inline-block;
        }

        .d3 button {
            float: right;
            margin-right: 10px;
            margin-top: 17px;
        }

        .d3 h3 {
            display: inline-block;
        }

        .gwc {
            width: 100%;
            height: 300px;
            background-color: blue;
            position: relative;
            display: none;
            overflow-y: auto;
        }

        .gwc img {
            width: 100px;
        }

        .d4 {
            display: none;
            position: relative;
            bottom: 0;
        }

        .d4 p {
            display: inline-block;
        }

        .d4 button {
            float: right;
            margin-right: 10px;
            margin-top: 17px;
        }

        .d4 h3 {
            display: inline-block;
        }

        .fhdd {
            display: none;
        }

        .fk {
            width: 375px;
            height: 440px;
            overflow-y: auto;
            display: none;
        }

        .fhgwc {
            display: none;
        }
    </style>
    <style>
        html,
        body {
            position: relative;
            height: 100%;
        }

        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .swiper-slide img {
            display: block;
            width: 70px;
            height: 100px;
            object-fit: cover;
        }

        .swiper-slide {
            width: 60%;
        }

        .swiper-slide:nth-child(2n) {
            width: 40%;
        }

        .swiper-slide:nth-child(3n) {
            width: 20%;
        }

        .mySwiper {
            width: 100%;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="d1">
        <div class="head">
            <a href="./地图.html">郑州荥阳吾悦广场店 ></a>
            <p class="s1">该店铺距您4.34km</p>
            <p class="s2" onclick="gg()">客官：请适度点餐，光盘行动拒绝浪费，使用公勺公筷。</p>
        </div>
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="微信截图_20250221184133.png" alt=""></div>
                <div class="swiper-slide"><img src="微信截图_20250221184153.png" alt=""></div>
                <div class="swiper-slide"><img src="微信截图_20250221184201.png" alt=""></div>
                <div class="swiper-slide"><img src="微信截图_20250221184206.png" alt=""></div>
            </div>
        </div>
        <div class="d2">
            <div class="b1">
                <div class="a"><span>招牌烤鱼</span></div>
                <div class="a"><span>专薯虾锅</span></div>
                <div class="a"><span>特色烧烤</span></div>
                <div class="a"><span>小吃炸货</span></div>
            </div>
            <div class="b2 b show">

            </div>
            <div class="b">
                2
            </div>
            <div class="b">
                3
            </div>
            <div class="b">
                4
            </div>
        </div>
        <div class="gwc">

        </div>
        <div class="fk">

        </div>
        <button class="fhgwc" onclick="fhgwc()">返回</button>
        <div class="d3">
            <p>￥
            <h3>0</h3>
            </p><button onclick="gwc()">选好了</button>
        </div>
        <button class="fhdd" onclick="fhdd()">返回</button>
        <div class="d4">
            <p>￥
            <h3>0</h3>
            </p><button onclick="js()">结算</button>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>

    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper(".mySwiper", {
            slidesPerView: 4,
            spaceBetween: 30,
            centeredSlides: true,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
        });
    </script>
    <script>
        var arr = [{
            id: 1,
            pid: 0,
            img: '微信截图_20250221191056.png',
            name: '青花椒烤鱼',
            jia: 79,
            num: 0,
            shu: 1
        }, {
            id: 2,
            pid: 0,
            img: '微信截图_20250221191752.png',
            name: '咖咖给喱烤鱼',
            jia: 79,
            num: 0,
            shu: 1
        },
        {
            id: 3,
            pid: 1,
            img: '微信截图_20250221191752.png',
            name: '咖咖给喱烤鱼',
            jia: 79,
            num: 0,
            shu: 1
        },
        {
            id: 4,
            pid: 1,
            img: '微信截图_20250221191752.png',
            name: '咖咖给喱烤鱼',
            jia: 79,
            num: 0,
            shu: 1
        },
        {
            id: 5,
            pid: 2,
            img: '微信截图_20250221191752.png',
            name: '咖咖给喱烤鱼',
            jia: 79,
            num: 0,
            shu: 1
        },
        {
            id: 6,
            pid: 2,
            img: '微信截图_20250221191752.png',
            name: '咖咖给喱烤鱼',
            jia: 79,
            num: 0,
            shu: 1
        },
        {
            id: 7,
            pid: 3,
            img: '微信截图_20250221191752.png',
            name: '咖咖给喱烤鱼',
            jia: 79,
            num: 0,
            shu: 1
        },
        {
            id: 7,
            pid: 3,
            img: '微信截图_20250221191752.png',
            name: '咖咖给喱烤鱼',
            jia: 79,
            num: 0,
            shu: 1
        },
        ]
        // 渲染首页
        $('.b2').html('')
        arr.forEach(item => {
            $('.b2').append(`<div>
                            <img src="${item.img}" onclick="xq(${item.id})">
                            <p>${item.name}</p>
                            <p>￥${item.jia}<span>起/一份</span><button class="an1" onclick="xuan(${item.id})">选</button></p>
                        </div>`)
        })
        // tab栏
        // var a = document.querySelectorAll('.a')
        // var b = document.querySelectorAll('.b')
        // a.forEach((item, index) => {
        //     item.addEventListener('click', () => {
        //         b.forEach(item2 => {
        //             item2.classList.remove('show')
        //         })
        //         b[index].classList.add('show')
        //     })
        // })
        var a = document.querySelectorAll('.a')

        // 公告
        function gg() {

        }
        // 渲染购物车
        function xr() {
            $('.gwc').html('')
            data.forEach(item => {
                $('.gwc').append(`<div>
                            <img src="${item.img}">
                            <p>${item.name}</p>
                            <p><button class="an1" onclick="jian(${item.id})">-</button>${item.num}<button class="an2" onclick="jia(${item.id})">+</button></p>
                        </div>`)
            })
        }
        var zong = 0
        var data = []
        function xuan(id) {
            var a = arr.find(item => item.id == id)
            var b = data.includes(a)
            if (b == false) {
                data.push(a)
                a.num++
                zong += a.jia * a.num
                $('.d3 h3').html('')
                $('.d3 h3').append(zong)
                $('.d4 h3').html('')
                $('.d4 h3').append(zong)
                xr()
            }
        }
        // 计算价格+
        function jia(id) {
            var a = data.find(item => item.id == id)
            zong += a.jia * 1
            a.num++
            $('.d3 h3').html('')
            $('.d3 h3').append(zong)
            $('.d4 h3').html('')
            $('.d4 h3').append(zong)
            xr()
        }
        // 计算价格-
        function jian(id) {
            var a = data.find(item => item.id == id)
            if (a.num > 1) {
                zong -= a.jia * 1
            }
            if (a.num > 1) {
                a.num--
            }
            $('.d3 h3').html('')
            $('.d3 h3').append(zong)
            $('.d4 h3').html('')
            $('.d4 h3').append(zong)
            xr()
        }
        // 详情
        function xq(id) {
            $('.b2').html('')
            var a = arr.find(item => item.id == id)
            $('.b2').append(`<img src="${a.img}"><p>${a.name}</p><button onclick="fhsy()">返回</button>`)
        }
        function gwc() {
            $('.d2').css('display', 'none')
            $('.gwc').css('display', 'block')
            $('.d4').css('display', 'block')
            $('.d3').css('display', 'none')
            $('.fhdd').css('display', 'block')
            $('.fk').css('display', 'none')
        }
        function fhdd() {
            $('.d2').css('display', 'block')
            $('.gwc').css('display', 'none')
            $('.d4').css('display', 'none')
            $('.d3').css('display', 'block')
            $('.fhdd').css('display', 'none')
            $('.fk').css('display', 'none')
        }
        function fhsy() {
            $('.b2').html('')
            arr.forEach(item => {
                $('.b2').append(`<div>
                            <img src="${item.img}" onclick="xq(${item.id})">
                            <p>${item.name}</p>
                            <p>￥${item.jia}<span>起/一份</span><button class="an1" onclick="xuan(${item.id})">选</button></p>
                        </div>`)
            })
        }
        function js() {
            $('.gwc').css('display', 'none')
            $('.fk').css('display', 'block')
            $('.fhdd').css('display', 'none')
            $('.fhgwc').css('display', 'block')
            $('.fk').html('')
            data.forEach(item => {
                $('.fk').append(`<div>
                            <img src="${item.img}">
                            <p>${item.name}</p>
                            <p>${item.jia * item.num}</p>   

                        </div>`)
            })
        }
        function fhgwc() {
            $('.d2').css('display', 'none')
            $('.gwc').css('display', 'block')
            $('.d4').css('display', 'block')
            $('.d3').css('display', 'none')
            $('.fhdd').css('display', 'block')
            $('.fk').css('display', 'none')
            $('.fhgwc').css('display', 'none')  
        }
    </script>
</body>

</html>